<template>
  <a-modal
    :visible="visible"
    title="新增"
    cancelText="取消"
    okText="提交"
    @ok="submit"
    @cancel="cancel"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="type" label="类型" name="type" v-show="false">
        <a-input v-model:value="formState.type"/>
      </a-form-item>
      <a-form-item ref="xuhao" label="清单序号" name="xuhao">
        <a-input v-model:value="formState.xuhao" placeholder="请输入清单序号"/>
        <span>示例：1或1.1或1.1.1。每个数字之间请用小数点隔开</span>
      </a-form-item>
      <a-form-item ref="wtmshu" label="问题描述" name="wtmshu">
        <a-input v-model:value="formState.wtmshu" placeholder="请输入问题描述"/>
      </a-form-item>
      <a-form-item ref="xgfgbzhui" label="相关法规标准" name="xgfgbzhui">
        <a-textarea v-model:value="formState.xgfgbzhui" placeholder="请输入相关法规标准"/>
      </a-form-item>
      <a-form-item ref="fgbznrong" label="法规标准内容" name="fgbznrong">
        <a-textarea v-model:value="formState.fgbznrong" placeholder="请输入法规标准内容"/>
      </a-form-item>

      <a-form-item ref="wtflyban" label="一般" name="wtflyban">
        <a-input v-model:value="formState.wtflyban" placeholder="请输入一般的情形"/>
      </a-form-item>
      <a-form-item ref="wtfljzhong" label="较重" name="wtfljzhong">
        <a-input v-model:value="formState.wtfljzhong" placeholder="请输入较重的情形"/>
      </a-form-item>
      <a-form-item ref="wtflyzhong" label="严重" name="wtflyzhong">
        <a-input v-model:value="formState.wtflyzhong" placeholder="请输入严重的情形"/>
      </a-form-item>

      <a-form-item ref="zrzti1" label="主体1" name="zrzti1">
        <a-input v-model:value="formState.zrzti1" placeholder="请输入主体1"/>
      </a-form-item>
      <a-form-item ref="zrzti2" label="主体2" name="zrzti2">
        <a-input v-model:value="formState.zrzti2" placeholder="请输入主体2"/>
      </a-form-item>
      <a-form-item ref="zrzti3" label="主体3" name="zrzti3">
        <a-input v-model:value="formState.zrzti3" placeholder="请输入主体3"/>
      </a-form-item>
      <a-form-item ref="zrzti4" label="主体4" name="zrzti4">
        <a-input v-model:value="formState.zrzti4" placeholder="请输入主体4"/>
      </a-form-item>

      <a-form-item ref="bzhu" label="备注" name="bzhu">
        <a-textarea v-model:value="formState.bzhu" placeholder="请输入备注"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { message } from 'ant-design-vue';
import { save } from "@/api/module/commonProblem";
import { defineComponent, reactive, ref, toRaw, watch} from "vue";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    }
  },
  emit: ["close"],
  setup(props, context) {
    const formRef = ref();

    const formState = reactive({

    });

    const formRules = {
      xuhao: [
        { required: true, message: '请输入名称', trigger: 'blur'},
      ],
      wtmshu: [
        { required: true, message: '请输入标识', trigger: 'blur'},
      ]
    };

    watch(props,(props)=>{
      formState.type = props.record.type;
    });

    const submit = (e) => {
      formRef.value
        .validate()
        .then(() => {
          save(toRaw(formState)).then((response)=>{
            if(response.success){
              message.success({ content: '保存成功', duration: 1 }).then(()=>{
                cancel();
              });
            }else{
              message.success({ content: '保存失败', duration: 1 }).then(()=>{
                cancel();
              });
            }
          });
        })
        .catch(error => {
          console.log('error', error);
        });
    }

    const cancel = (e) => {
      formRef.value.resetFields();
      context.emit("close", false);
    };

    return {
      submit,
      cancel,

      formRef,
      formState,
      formRules,

      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    }
  }
})
</script>
